<div class="framework-box">
    <div class="billing-module">
        <div class="module-title">镜像</div>
        <div class="module-content" style="flex-grow:1">
            <div class="module-select" style="margin-top: 20px;">
                <p class="active">公共镜像</p>
                <div class="question-box" style="height: 35px;">
                    <img src="{{ STATIC_URL }}ratingfunction/img/question.png" alt="">
                    <div class="question">
                        问题介绍
                    </div>
                </div>
            </div>

            <table class="table table-striped">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>描述</th>
                    <th>选择</th>
                </tr>
                </thead>
                <tbody>
                {% for source_type in source_type_choices %}
                    <tr id="tb_title">
                        <td>
                            <div>
                                <img src="{{ STATIC_URL }}ratingfunction/img/down.png" alt="" id="img_down">
                                <span>{{ source_type.name }}</span>
                            </div>
                        </td>
                        <td>{{ source_type.description }}</td>
                        <td><input type="radio" required name="source_type" id="group"
                                   value="{{ source_type.source_type }}"></td>
                    </tr>

                {% endfor %}
                </tbody>
            </table>
            <table class="table table-striped" id="tb-hide" style="display: none">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>更新时间</th>
                    <th>大小</th>
                    <th>类型</th>
                    <th>可见性</th>
                </tr>
                </thead>
                <tbody>
                {% for source_type in source_type_choices %}
                    <input type="hidden" name="source" value="{{ source_type.source_type }}">
                    {% for obj in source_type.obj_list %}
                        <tr>
                            <input type="hidden" name="obj" value=" {{ obj }}">
                            <td><input type="radio" name="image_id" required id="image"
                                       value="{{ obj.id }}">{{ obj.name }}</td>
                            <td>{{ obj.updated_at }}</td>
                            <td>
                                {% widthratio obj.size 1048576 1 as image %}
                                {{ image|floatformat:2 }}M
                            </td>
                            <td>{{ obj.disk_format }}</td>
                            {% if obj.is_public == True %}
                                <td>公有</td>
                            {% else %}
                                <td>私有</td>
                            {% endif %}
                        </tr>
                    {% endfor %}

                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    var source_type = document.getElementsByName("source_type")
    var confirm_source_type = document.getElementsByName("source")
    $("#tb_title").click(function () {
        if (source_type.value == confirm_source_type.value) { //当 source_type类型一样的时候，才能出来
            $("#tb-hide").toggle();
            if ($("#tb-hide").is(':hidden')) {
                $("#img_down").attr("src", "{{ STATIC_URL }}ratingfunction/img/down.png")
            } else {
                $("#img_down").attr("src", "{{ STATIC_URL }}ratingfunction/img/up.png")
            }
        }

    });
</script>